<template>
  <el-table :data="data" border>
    <el-table-column label="名称" prop="name" :width="120" />
    <el-table-column label="标签" prop="label" :width="180" />
    <el-table-column label="图标" :width="80">
      <template #default="{ row }">
        <Icon :icon="row.icon" :size="row.size || 16" :color="row.color" :hover-color="row.hoverColor" />
      </template>
    </el-table-column>
    <el-table-column prop="items" label="分组项" />
    <el-table-column :width="100">
      <template #header>
        <OperateBar :operates="['add', 'batch-add','batch-edit']" @add="add" @batch-add="batchAdd" @batch-edit="batchEdit" />
      </template>
      <template #default="{ row }">
        <OperateBar :operates="['edit','remove']" @edit="edit(row.name)" @remove="remove(row.name)" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
  import { ElTable, ElTableColumn } from 'element-plus';
  import { Icon } from '@/components/Icon';
  import { computed } from 'vue';
  import { OperateBar } from '../../OperateBar';
  import { open } from '@/components/Popup';
  import GroupCreator from './GroupCreator.vue';
  import { getInitData } from '..';
  import GroupBatchCreator from './GroupBatchCreator.vue';
  import GroupBatchEditor from './GroupBatchEditor.vue';
  import GroupEditor from './GroupEditor.vue';
  import { currentApp, getSeed } from '@/views/seed-dev';

  const props = defineProps<{type?: 'app' | 'seed', seedName?: string}>()
  const data = computed(() => getInitData(props.seedName))

  function add() {
    open({title: '新增分组'}, GroupCreator, {type: props.type, seedName: props.seedName})
  }

  function batchAdd() {
    open({title: '批量新增分组', fullscreen: true}, GroupBatchCreator, {type: props.type, seedName: props.seedName})
  }

  function batchEdit() {
    open({title: '批量编辑分组', fullscreen: true}, GroupBatchEditor, {type: props.type, seedName: props.seedName})
  }

  function edit(name: string) {
    open({title: '编辑分组'}, GroupEditor, {name, type: props.type, seedName: props.seedName})
  }

  function remove(name: string) {
    if(props.type === 'seed') {
      delete getSeed(props.seedName).groups[name]
    } else {
      delete currentApp.value.groups[name]
    }
  }
</script>